<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>gin 请求和相应结构工具</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.js"></script>
    <style type="text/css">
        body{background-color: #2d2d2d;color:#94C999;font-size:15px;}
        li{list-style:none}
        a{color:#F27B45;}
        textarea,input{border:0px solid #fff;color: #ccc; font-size: 15px; background-color: #2d2d2d; border-left: 10px solid #ccc;padding-left: 35px;}
    </style>
</head>
<body>

<div id="app">


  <input type="text" name="field" value="" size="50" v-model="newfield"   @keyup.13="add($event)" placeholder="name,string,1"> <a href="javascript:void();" @click="cleanall">clean all</a>

  <br>

  <ul>
      <li v-for="(f,index) in fields" v-on:dblclick="rmItem(index)">
          {{f.name}} {{f.t}} `json:"{{f.jname}}"  xml:"{{f.jname}}"  form:"{{f.jname}}"  query:"{{f.jname}}" <span v-if="f.binding === '1'">binding:"required"</span>`
      </li>
  </ul>


    <ul style="margin-top:30px;">
      <li v-for="f in fields">
        {{f.name}} {{f.t}} `json:"{{f.jname}}<span v-if="f.binding === '1'">,omitempty</span>"`
      </li>
  </ul>

  

  <ul>
      <li v-for="f in fields">
          rs[i].{{f.name}} = string(list[i]["{{f.jname}}"])
      </li>
  </ul>


  <textarea v-model="newblock" rows="10" cols="100"  @blur="resp($event)" placeholder="从sql获取返回值struct"></textarea>
    <ul>
      <li v-for="(f,index) in blocks" >
          {{f.name}} {{f.t}} `json:"{{f.jname}}" `
      </li>
  </ul>


  <textarea v-model="mdtable" rows="4" cols="100"  @blur="rendermdtable($event)" placeholder="json结构的请求体"></textarea>
    <ul>
      <li>参数 | 类型 | 是否必须 | 描述 </li>
      <li>---|---|---|---</li>
      <li v-for="(f,index) in apiparamtable" >
           {{f.field}} | {{f.ftype}} | {{f.require}} | eg:<span v-if="f.ftype === 'string'">"</span>{{f.comment}}<span v-if="f.ftype === 'string'">"</span>
      </li>
  </ul>

</div>

<script type="text/javascript">

String.prototype.transform = function(){ 
    var re=/_(\w)/g; 
    return this.replace(re,function(){ 
        var args=arguments; 
        return args[1].toUpperCase(); 
    }) 
} 

function firstUpperCase(str) {
  // return str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
  return str.replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
}

function save(obj){
    var data = JSON.stringify(obj);
    // localStorage.allfield = data;
    localStorage.setItem("fieldlist", data);
}



    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!',
        newfield:"",
        newblock:"",
        mdtable:"",
        fields:[],
        blocks:[],
        apiparamtable:[],
      },
      created:function(){
            var data = localStorage.getItem("fieldlist");
            if ( data !== null) {
                this.fields = JSON.parse(data);
            }
        },
      methods:{
        cleanall:function(){
            this.fields = [];
            save(this.fields);
        },
        rmItem:function(idx){
            this.fields.splice(idx,1);
            save(this.fields);
        },
        add :function(){
            var newf = this.newfield.trim();
            
            var e = newf.split(',');

            var Name = e[0].transform()
            Name = firstUpperCase(Name);

            var jname = e[0];

            var t = "string";
            var binding = "0";

            var n = e.length;
            if (n>1) {
                t = e[1];
            }

            if (n>2) {
                binding = e[2];
            }

            var item = {};
            item.name = Name;
            item.jname = jname;
            item.t = t;
            item.binding = binding;

            this.fields.push(item);
            this.newfield = "";

            save(this.fields);
        },
        resp:function(){
            this.blocks = [];
            var newb = this.newblock.trim();
            
            var rows = newb.split("\n");

            var n = rows.length;
            for (var i = 0; i < n; i++) {
               
                var row = rows[i].trim();
                var cells = row.split(' ');

                var field = cells[0].replace(/`/g,'');
                var fieldT = firstUpperCase(field.transform());
                var t = "string"
                if (cells[1] && cells[1].indexOf("int") != -1) {
                    t = "int"
                }

                this.blocks.push({"name":fieldT,"jname":field,"t":t})
            }

            console.log(this.blocks);
        },
        rendermdtable:function(){
            this.apiparamtable = [];
            var jdata = JSON.parse(this.mdtable);

            for(var key in jdata){

                var ftype = "string";
                var fval = jdata[key];
                var frequire = "Y"

                if (typeof(fval) != "string") {
                    ftype = "int";
                }

                if (fval == "") {
                    frequire = "N";
                }

                this.apiparamtable.push({"field":key,"ftype":ftype, "require":frequire, "comment":fval})
            }
        }
      }
    })
</script>

</body>
</html>